<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from "vue";

onMounted(() => {
    var myChart = echarts.init(document.getElementById('distribution'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%',
        },
        legend: {
            data: ['30k', '20~30k', '15~20k', '10~15k', '10k及以下']
        },

        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: [
                    { value: 60, name: '15~20k' },
                    { value: 40, name: '20~30k' },
                    { value: 20, name: '30k' },
                    { value: 80, name: '10~15k' },
                    { value: 100, name: '10k及以下' }
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})
</script>


<template>
    <div class="right-Bottom">
        <div class="right-Bottom-img">
            <span style="padding-left: 23px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">毕业生薪资分布</span>
        </div>
        <div class="right-Bottom-bottom">
            <div id="distribution" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.right-Bottom {
    width: 28rem;
    height: 30rem;
    margin: 0 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/RightRight.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 25rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);
    }
}
</style>